<template>
  <n-radio-group :size="size" :value="value" @update:value="updateValue" :max="max" :min="min">
    <div v-if="type == 'button'">
      <n-radio-button v-for="option in options" :value="option.value" :label="option.label"
        :disabled="option.disabled" />
    </div>
    <n-grid v-else :y-gap="8" :cols="cols">
      <n-gi v-for="option in options">
        <n-radio :value="option.value" :label="option.label" :disabled="option.disabled" />
      </n-gi>
    </n-grid>
  </n-radio-group>ç
</template>

<script setup lang="tsx">
type RadioProps = {
  options?: any[],
  value?: (string | number),
  size?: 'small' | 'medium' | 'large',
  cols?: string,
  max?: number,
  min?: number,
  type?: 'button' | 'default',
}

let props = withDefaults(defineProps<RadioProps>(), {
  cols: '4 400:4 800:8 : 1000:10',
  size: 'medium',
  type: 'default',
})

let emits = defineEmits(['update:value'])
let updateValue = (v) => {
  emits('update:value', v)
}

</script>
